<template>
    <van-sticky>
        <van-nav-bar
            title="我的订单"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <!-- 标签栏 -->
    <van-tabs v-model:active="StatusActive" sticky @click-tab="onTabChange">
        <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key"></van-tab>
    </van-tabs>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 加载列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="list">
                <div class="item" v-for="item in list" :key="item.id">
                    <div class="header">
                        <div class="code">订单号:{{ item.code }}</div>
                        <div class="status">{{ item.status_text }}</div>
                    </div>
                    <div class="product">
                        <!-- 商品卡片 -->
                        <van-card
                            v-for="OrderProduct in item.order_product"
                            :thumb="OrderProduct.products.thumbs_cdn"
                            :num="OrderProduct.pronum"
                            :tag="OrderProduct.products.flag_text"
                        >
                            <template #title>
                                <div class="title">{{ OrderProduct.products.name }}</div>
                            </template>

                            <!-- 卡片的插槽部分 -->
                            <template #desc>
                                <div v-if="OrderProduct.attrs">
                                    <van-tag class="tag" type="primary">无规格数据</van-tag>
                                </div v-else>
                                <van-tag class="tag" type="danger">无规格数据</van-tag>
                            </template>

                            <template #price>
                                <div class="price">商品总价：￥{{ OrderProduct.total }}</div>
                            </template>
                        </van-card>
                    </div>

                    <div class="order-info">
                            <div>订单总价：￥ {{ item.amount }}</div>
                            <div>下单时间：{{ item.createtime_date }}</div>
                    </div>

                    <div class="footer">
                        <!-- status = 1 仅退款 -->
                        <van-button class="button" v-if="item.status == 1" type="danger" size="small" @click="onApply(item.id)">申请退款</van-button>

                        <!-- status = 2 -->
                        <van-button class="button" v-if="item.status == 2" type="success" size="small">确认收货</van-button>
                        <van-button class="button" v-if="item.status >= 2 && item.status < 4" type="warning" @click="ToQuery(item.id)" size="small">物流详情</van-button>

                        <!-- status = 3 已收货 -->
                        <van-button class="button" v-if="item.status == 3" type="warning" size="small">立即评价</van-button>

                        <van-button class="button" type="primary" size="small" @click="ToOrderInfo(item.id)">订单详情</van-button>
                        
                    </div>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

    <!-- 退款的弹框 -->
    <van-popup v-model:show="ApplyShow" position="bottom">
        <van-form @submit="onOrderApplyConfirm">
            <van-field
                v-model="remark"
                name="remark"
                rows="5"
                autosize
                type="textarea"
                maxlength="120"
                placeholder="请输入申请原因"
                show-word-limit
                :rules="[{ required: true, message: '请填写申请原因' }]"
            />
            <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交申请</van-button>
        </van-form>
    </van-popup>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

// 标签栏数据
let StatusActive = ref('all')
let StatusList = ref([
    {title: '全部', value: 'all'},
    {title: '未支付', value: '0'},
    {title: '已支付', value: '1'},
    {title: '已发货', value: '2'},
    {title: '已收货', value: '3'},
    {title: '已完成', value: '4'},
    {title: '退货退款', value: '-1'},
])

// 下拉刷新的数据
let list = ref([]);// 数据列表
let page = ref(1);// 分页
let loading = ref(false);// 加载状态
let finished = ref(false);// 是否无更多数据
let refreshing = ref(false);// 下拉刷新

// 在未发货前申请退款
const ApplyShow = ref(false);
const remark = ref('');
const orderid = ref(0);

// 申请退款
const onApply = (id) =>
{
    if(orderid.value !== id)
    {
        remark.value = '';
    }

    orderid.value = id;

    ApplyShow.value = true;
}

// tab切换事件
const onTabChange = () =>
{
    onRefresh();
}

// 确认退款事件
const onOrderApplyConfirm = () =>
{

}

const onRefresh = () =>
{
    list.value = [];
    page.value = 1;
    finished.value = false;
    loading.value = true;
    refreshing.value = true;

    setTimeout(onLoad,1500);
}

const onLoad = async () =>
{
    if(refreshing.value)
    {
        refreshing.value = false;
    }

    let params = {
        busid:business.value.id,
        page:page.value,
        status:StatusActive.value
    }

    let result = await proxy.$http.post({
        url:'/order/index',
        params
    })

    finished.value = false;
    loading.value = false;

    if(result.code === 1)
    {
        let count = result.data.count ?? 0;
        list.value = list.value.concat(result.data.list) ?? [];

        if(list.value.length >= count)
        {
            finished.value = true;

            return false;
        }

        page.value = page.value + 1;
    }else{
        finished.value = true;
        
        proxy.$fail(result.msg);
    }
}
const ToOrderInfo = (orderid) => proxy.$router.push({path:'/order/info',query:{orderid}})

const ToQuery = (orderid) => proxy.$router.push({path:'/order/query',query:{orderid}});

const onBack = () => proxy.$router.back();
</script>

<style scoped>
@import url('/assets/css/OrderIndex.css');
</style>